﻿<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example</title> 
	<style type="text/css">
<!--
.STYLE1 {
	font-family: "宋体";
	font-size: 12px;
	color: #27A3D8;
}
-->
</style>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false"></script>
    <script type="text/javascript"> 

 	var map;
     var rectangle ;
     var rectOptions;
	var clickCount=0;//开始电子围栏后，是否点击了第一点
    function initialize() { 
        var myLatlng = new google.maps.LatLng(39, 117);
        var myOptions = {
            center: myLatlng,
            zoom: 10,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, poistion: google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN,
  	        google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE]
            },
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
            scaleControl: true,
            //disableDoubleClickZoom: true/false,
            streetViewControl: true,
            //draggableCursor: 'move',
            overviewMapControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        rectangle = new google.maps.Rectangle();
        rectOptions = {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            clickable: false,
            bounds: map.getBounds()
        };
        
		window.parent.stargetef();

		
    }

    function startDraw() {
        rectOptions.bounds = null;
        rectOptions.map = map;
        rectangle.setOptions(rectOptions);
        
        var beginlatlng = ""; //记录起始点坐标
        var endlatlng = ""; //记录结束点坐标
        var rectBounds = "";
        var SfClick = "";
        var SfMove = "";
        var clickCount = 0; //点击次数
        SfClick = google.maps.event.addListener(map, 'click', function(e) {
            var begin = e.latLng;

            if (clickCount == 0) {
                clickCount = 1;
                SfMove = google.maps.event.addListener(map, "mousemove", function(e) {
                    beginlatlng = begin;
                    endlatlng = e.latLng;
                    rectOptions.bounds = new google.maps.LatLngBounds(beginlatlng, endlatlng);
                    if (endlatlng.lng() < beginlatlng.lng()) {
                        rectOptions.bounds = new google.maps.LatLngBounds(endlatlng, beginlatlng);
                    }

                    rectOptions.map = map;
                    rectangle.setOptions(rectOptions);
                });
            } else if (clickCount == 1) {
                google.maps.event.removeListener(SfMove);
                google.maps.event.removeListener(SfClick);
                clickCount = 0;
                if (window.confirm("确定设置电子围栏范围吗？")) {
                    var minX;
                    var minY;
                    var maxX;
                    var maxY;
                    var centerX;
                    var centerY;
                    var zoom;

                    centerX = map.getCenter().lng().toFixed(6);
                    centerY = map.getCenter().lat().toFixed(6);
                    zoom = map.getZoom().toString();

                    if (beginlatlng.lng() > endlatlng.lng()) {
                        minX = endlatlng.lng().toFixed(6);
                        maxX = beginlatlng.lng().toFixed(6);
                    }
                    else {
                        minX = beginlatlng.lng().toFixed(6);
                        maxX = endlatlng.lng().toFixed(6);
                    }

                    if (beginlatlng.lat() > endlatlng.lat()) {
                        minY = endlatlng.lat().toFixed(6);
                        maxY = beginlatlng.lat().toFixed(6);
                    }
                    else {
                        minY = beginlatlng.lat().toFixed(6);
                        maxY = endlatlng.lat().toFixed(6);
                    }
                    window.parent.setRectangle("010," + minX + "," + minY + "," + maxX + "," + maxY + ";" + minX + "," + minY + "," + maxX + "," + maxY + "," + centerX + "," + centerY + "," + zoom);
                } else {
                    rectOptions.map = null;
                    rectangle.setOptions(rectOptions);
                }
            }
        });
    }
    function cancelDraw() {
        rectOptions.map = null;
        rectangle.setOptions(rectOptions);
        window.parent.cancelRectangle()
    }
    function createArea(lng1, lat1, lng2, lat2, centerx, centery, zoom) { //

        map.setCenter(new google.maps.LatLng(centery, centerx), parseInt(zoom));
        var beginlatlng = new google.maps.LatLng(lat1, lng1);
        var endlatlng = new google.maps.LatLng(lat2, lng2);
        rectOptions.bounds = new google.maps.LatLngBounds(beginlatlng, endlatlng);
        if (endlatlng.lng() < beginlatlng.lng()) {
            rectOptions.bounds = new google.maps.LatLngBounds(endlatlng, beginlatlng);
        }

        rectOptions.map = map;
        rectangle.setOptions(rectOptions);

    }
    </script> 
</head> 

  <body onload='initialize()' style='padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px'>
    <div id="map_canvas" style='width:100%;height:100%;left:0px;top:0px;'></div>
      <input type="hidden" id="mapx1"/><input type="hidden" id="mapy1"/>
	  <input type="hidden" id="mapx2"/><input type="hidden" id="mapy2"/>
	  <input type="hidden" id="centerx"/><input type="hidden" id="centery"/>
	  <input type="hidden" id="zoom"/>
</body> 
</html>